<template name='flex'>
	<view class="flex" @click="onClick" :class="['dir--'+dir, 'main--'+main ,'cross--'+cross ,'wrap--'+wrap ,'box--'+box]" :style="_style">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "flex",
		//属性
		props: {
			// 主轴方向
			dir: {
				type: String,
				default: 'left'
			},
			box: {
				type: String,
				default: 'none'
			},
			padding: {
				type: String,
				default: ''
			},
			// 主轴对齐方式
			main: {
				type: String,
				default: 'left'
			},
			// 交叉轴对齐方式
			cross: {
				type: String,
				default: 'stretch'
			},
			// 换行设置
			wrap: {
				type: String,
				default: 'nowrap'
			}
		},
		computed:{
			_style(){
				let _padding = "";
				if(this.box == "padding") {
					let paddings = this.padding.split(" ");
					_padding = `padding:`+this.upx2px(paddings[0])+` ` +this.upx2px(paddings[1])+` ` +this.upx2px(paddings[2])+` ` +this.upx2px(paddings[3]) ;
				}
				return _padding
			}
		},
		methods: {
			onClick(event) {
				this.$emit("click", event)
			},
			upx2px(upx) {
				//如果是upx结尾，则去掉upx并转换为px
				if(upx.endsWith("upx")) {
					upx = upx.replace("upx","")
				} else if(upx.endsWith("px") || upx.endsWith("%")) {//如果是px或%结尾，则原样返回
					return upx
				} 
				//如果没有传入单位，则为upx
				return uni.upx2px(upx) + "px";
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style>
	.flex {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.box--padding {
		box-sizing: border-box;
	}

	/* 主轴对齐方式 */
	.dir--left {
		flex-direction: row;
	}

	.dir--right {
		flex-direction: row-reverse;
	}

	.dir--top {
		flex-direction: column;
	}

	.dir--bottom {
		flex-direction: column-reverse;
	}

	/* 主轴排列方式 */
	.main--start {
		justify-content: flex-start;
	}

	.main--end {
		justify-content: flex-end;
	}

	.main--between {
		justify-content: space-between;
	}

	.main--center {
		justify-content: center;
	}

	.main--around {
		justify-content: space-around;
	}

	/* 换行设置 */
	.wrap--nowrap {
		flex-wrap: nowrap;
	}

	.wrap--wrap {
		flex-wrap: wrap;
	}

	.wrap--reverse {
		flex-wrap: wrap-reverse;
	}

	/* 交叉轴排列方式 */
	.cross--start {
		align-items: flex-start;
	}

	.cross--end {
		align-items: flex-end;
	}

	.cross--center {
		align-items: center;
	}

	.cross--baseline {
		align-items: baseline;
	}

	.cross--stretch {
		align-items: stretch;
	}
</style>
